<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        
    </style>
</head>
<body>
    <div class="box">
        <div class="xbox">hello</div>
        <span>文字1</span>
        <span abc="ly">文字2</span>
        <span>文字3</span>
        <span abc="ly">文字4</span>
        <div class="xbox">world</div>
        <p abc="ly">段落1</p>
        <p>段落2</p>
        <p>段落3</p>
        <div abc="ly" class="xbox">hahha</div>
        <h3>这是标题1</h3>
        <h3>这是标题2</h3>
        <h3>这是标题3</h3>
        <div class="xbox">123214</div>
        <div class="xbox cont">heiheihiehei</div>
        <div class="cont xbox">hi</div>
        <div class="xbox">abc</div>
    </div>
</body>
<script>
    // var axbox = document.querySelectorAll(".xbox")
    // for(var i=0;i<axbox.length;i++){
    //     axbox[i].onclick = function(){
    //         console.log(this);
    //     }
    // }

    var obox = document.querySelector(".box")
    obox.onclick = function(eve){
        var e = eve || window.event;
        var target = e.target || e.srcElement;
        // 核心：通过事件目标元素身上的唯一标志找到真正要触发事件的元素
        // if(target.className === "xbox"){
        // if(target.tagName === "DIV"){
        // if(target.className.indexOf("xbox") !== -1){
        if(target.getAttribute("abc") === "ly"){
            // 执行真正要执行的功能
            console.log(target);
        }
    }

</script>
</html>